<template>
  <div class="index">
    <router-view></router-view>
      <div class="view">

<!--      <router-link to="login">-->
        <span class="header_login iconfont" @click="fnlogin">&#xe611;</span>
<!--      </router-link>-->

<!--      <router-link to="mine">-->
        <span class="header_mine" @click="fnmine">我的</span>
<!--      </router-link>-->

<!--      <router-link to="find">-->
        <span class="header_find" @click="fnfind">发现</span>
<!--      </router-link>-->

<!--      <router-link to="cool">-->
        <span class="header_cool" @click="fncool">爽城</span>
<!--      </router-link>-->

<!--      <router-link to="video">-->
        <span class="header_video" @click="fnvideo">视频</span>
<!--      </router-link>-->

<!--      <router-link to="search">-->
        <span class="header_search iconfont" @click="fnsearch">&#xe633;</span>
<!--      </router-link>-->

    </div>


  </div>

</template>

<script>
    export default {
        name: 'index',
        data() {
            return {
                type: ''
            }
        },
        methods: {
            fnlogin() {
                this.$router.push('/index/login');
                document.querySelector('.header_login').style.color = "#842b00";
                document.querySelector('.header_mine').style.color = "";
                document.querySelector('.header_find').style.color = "";
                document.querySelector('.header_cool').style.color = "";
                document.querySelector('.header_video').style.color = "";
                document.querySelector('.header_search').style.color = "";
            },
            fnmine() {
                this.$router.push('/index/mine');
                document.querySelector('.header_login').style.color = "";
                document.querySelector('.header_mine').style.color = "#842b00";
                document.querySelector('.header_find').style.color = "";
                document.querySelector('.header_cool').style.color = "";
                document.querySelector('.header_video').style.color = "";
                document.querySelector('.header_search').style.color = "";
            },
            fnfind() {
                this.$router.push('/index/find');
                document.querySelector('.header_login').style.color = "";
                document.querySelector('.header_mine').style.color = "";
                document.querySelector('.header_find').style.color = "#842b00";
                document.querySelector('.header_cool').style.color = "";
                document.querySelector('.header_video').style.color = "";
                document.querySelector('.header_search').style.color = "";
            },
            fncool() {
                this.$router.push('/index/cool');
                document.querySelector('.header_login').style.color = "";
                document.querySelector('.header_mine').style.color = "";
                document.querySelector('.header_find').style.color = "";
                document.querySelector('.header_cool').style.color = "#842b00";
                document.querySelector('.header_video').style.color = "";
                document.querySelector('.header_search').style.color = "";
            },
            fnvideo() {
                this.$router.push('/index/video');
                document.querySelector('.header_login').style.color = "";
                document.querySelector('.header_mine').style.color = "";
                document.querySelector('.header_find').style.color = "";
                document.querySelector('.header_cool').style.color = "";
                document.querySelector('.header_video').style.color = "#842b00";
                document.querySelector('.header_search').style.color = "";
            },
            fnsearch() {
                this.$router.push('/search');
                document.querySelector('.header_login').style.color = "";
                document.querySelector('.header_mine').style.color = "";
                document.querySelector('.header_find').style.color = "";
                document.querySelector('.header_cool').style.color = "";
                document.querySelector('.header_video').style.color = "";
                document.querySelector('.header_search').style.color = "#842b00";
            },

        },

    }
</script>

<style scoped>
  .view {
    width: 100%;
    /*height: 60px;*/
    background: #f1f1f1;
    margin-top: 0;
    position:fixed;
    top:0;
    font-size: 1.2rem;
    color: gainsboro;
    /*line-height: 4rem;*/
    line-height: 3.75rem;
    z-index: 10000;
  }
  .header_login {
    padding-left: 1.8rem;
    /*padding-right: 20rem;*/
    font-size: 1.5rem;
  }
  .header_mine {
    font-size: 1.2rem;
    padding-left: 2rem;
  }
  .header_video{
    /*padding-right: 20rem;*/
  }
  .header_search{
    padding-left: 2rem;
    font-size: 1.5rem;

  }

  a {
    color: gray;
    display: inline-block;
    text-align: center;

  }

  @font-face {
    font-family: 'iconfont';  /* project id 1482310 */
    src: url('http://at.alicdn.com/t/font_1482310_yvcgs2a8f1m.eot');
    src: url('http://at.alicdn.com/t/font_1482310_yvcgs2a8f1m.eot?#iefix') format('embedded-opentype'),
    url('http://at.alicdn.com/t/font_1482310_yvcgs2a8f1m.woff2') format('woff2'),
    url('http://at.alicdn.com/t/font_1482310_yvcgs2a8f1m.woff') format('woff'),
    url('http://at.alicdn.com/t/font_1482310_yvcgs2a8f1m.ttf') format('truetype'),
    url('http://at.alicdn.com/t/font_1482310_yvcgs2a8f1m.svg#iconfont') format('svg');
  }

  .iconfont {
    font-family: "iconfont" !important;
    /* font-size: 30rem; */
    font-style: normal;
    /*font-weight:lighter;*/
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.1rem;
    -moz-osx-font-smoothing: grayscale;
  }


</style>
